<template>
	<view>
		<view class="head-box">
				<view class="box-one wr" @click="test()"><span>{{ztw}}</span></view>
				<view class="box-two wr"></view>
				<view class="box-three wr"></view>
				<view class="head-box-banner">
					<view class="num"><span>{{score}}</span>积分</view>
					<navigator url="#">
						<view class="list">
							积分记录
							<u-icon name="arrow-right" color="#F1F2F3" size="12px"></u-icon>
						</view>
					</navigator>
				</view>
		</view>
		<view class="middle-box">
			<view>每天最多通过积分任务获得40积分奖励哦</view>
		</view>
		<view class="button-box">
			<view class="top">积分规则</view>
			<view class="list">
				<view class="black">
					<view><u-icon name="error-circle" color="#000000" size="21px"></u-icon><span></span>违规一次</view>
					-15积分
				</view>
				<view>
					<view><u-icon name="bookmark" color="#000000" size="21px"></u-icon><span></span>成功保留一次</view>
					2积分
				</view>
				<view>
					<view><u-icon name="camera" color="#000000" size="21px"></u-icon><span></span>成功监督一次</view>
					15积分
				</view>
				<view>
					<view><u-icon name="hourglass" color="#000000" size="21px"></u-icon><span></span>学习奖励积分</view>
					5积分
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				zty:"已签到",
				ztw:"未签到",
				score:361
			}
		},
		methods: {
			test () {
				console.log(1);
				this.ztw = "已签到";
			},
			
		},
		computed: {
			...mapState(['userinfo'])
		},
		onLoad() {
			console.log(this.userinfo);
			this.score = this.userinfo.ranks
		}
	}
</script>

<style>
.head-box {
	display: flex;
	background-image: url(https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/bg/22529.png);
	background-position: right bottom;
	background-repeat: no-repeat;
	padding: 10px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-top: 35px;
}
.head-box .wr {
	width: 100px;
	height: 100px;
	background-color: #f9f9f9;
	border-radius: 50%;
	z-index: auto;
}
.head-box .box-one {
	width: 65px;
	height: 65px;
	z-index: 3;
	display: flex;
	justify-content: center;
	flex-direction: column;
}
.head-box .box-two {
	width: 80px;
	height: 80px;
	z-index: 2;
	margin-top: -73px;
	margin-bottom: -87px;
	opacity: 0.7;
}
.head-box .box-three {
	width: 95px;
	height: 95px;
	z-index: 1;
	opacity: 0.3;
}
.head-box .box-one span {	
	display: flex;
	justify-content: center;
	color: #c2c20c;
	font-size: 13px;
}
.head-box-banner {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	color: #FFFFFF;
	font-weight: 700;
	margin-top: 17px;
}
.head-box-banner .list {
	display: flex;
	align-items: center;
	font-weight: 400;
}
.head-box-banner .num span {
	font-size: 21px;
	font-weight: 400;
	margin-right: 3px;
}
.middle-box {
	padding: 20px 15px;
}
.middle-box view {
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 45px;
	color: #FFFFFF;
	background-color: #363636;
	padding: 9px 0;
}
.button-box .top {
	margin-left: 25px;
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 15px;
}
.button-box .list {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-left: 27px;
	margin-right: 17px;
}
.button-box .list > view {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	color: #FF3333;
	margin-bottom: 25px;
}
.button-box .list .black {
	color: #000000;
}
.button-box .list view view {
	color: #000000;
	display: flex;
	flex-direction: row;
	align-items: center;
	font-size: 15px;
	font-weight: 700;
}
.button-box .list view span {
	margin-right: 9px;
}
</style>
